<template>
	<view>
		<v-tabs lineColor="black" fixed v-model="activeTab" :scroll="false" :tabs="['公示公告', '水质公告']" 
			line-height="0" @change="changeTab">
		</v-tabs>
		<view v-show="activeTab==0">
			<uni-list v-if="curList.list.length>0">
				<uni-list-item v-for="(record, idx) in bullets.list" :key="idx" :title="record.title" 
				 clickable @click="goDetail($event, record.id)">
					<view slot="right" class="gst">{{record.publishTime | smartTime}}</view>
				</uni-list-item>
			</uni-list>
			<view class="vertical" v-else-if="bullets.total===0">
				<image src="../../static/icons/empty.png" mode="widthFix" style="width: 300rpx;"></image>
				<view>暂时没有公示公告记录~~</view>
			</view>
		</view>
		<view v-show="activeTab==1">
			<uni-list v-if="curList.list.length>0">
				<uni-list-item v-for="(water, idx) in waters.list" :key="idx" :title="water.title" 
				clickable @click="goDetail($event, water.id)">
					<view slot="right" class="gst">{{water.publishTime | smartTime}}</view>
				</uni-list-item>
			</uni-list>
			<view class="vertical" v-else-if="waters.total===0">
				<image src="../../static/icons/empty.png" mode="widthFix" style="width: 300rpx;"></image>
				<view>暂时没有水质公告记录~~</view>
			</view>
		</view>
	</view>
</template>

<script>
	import hgCell from '@/components/hg-cell/hg-cell.vue'
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	import juFieldGroup from '@/components/ju-field/ju-field-group.vue';
	import juField from '@/components/ju-field/ju-field.vue';
	import mkUpload from '@/components/mk-upload/mk-upload.vue'
	import vTabs from '@/components/v-tabs/v-tabs.vue'
	import hgHr from '@/components/hg-hr/hg-hr.vue'
	
	const app = getApp()
	
	export default {
		components:{
			hgCell, xflSelect, juFieldGroup, juField, mkUpload, vTabs, hgHr,
		},
		filters:{
			left(str, len=20){
				return str.substr(0, len)
			},
			smartTime(time){
				const timeObj = new Date(time)
				const now = new Date()
				const 	year = timeObj.getFullYear(),
						nyear = now.getFullYear()
				const 	month = timeObj.getMonth() + 1,
						nmonth = now.getMonth() + 1
				const 	date = timeObj.getDate(),
						ndate = now.getDate()
				const 	hour = timeObj.getHours() > 10?timeObj.getHours():`0${timeObj.getHours()}`,
						nhour = now.getHours()
				const 	minute = timeObj.getMinutes() > 10?timeObj.getMinutes():`0${timeObj.getMinutes()}`,
						nminute = now.getMinutes()
				const 	second = timeObj.getSeconds()>10?timeObj.getSeconds():`0${timeObj.getSeconds()}`,
						nsecond = now.getSeconds()
				
				if(nyear > year){
					return `${year}${month}月${date}`
				}else if(nyear == year){
					if(nmonth == month){
						if(ndate == date){
							if(nhour == hour){
								if(nminute == minute){
									return '刚刚'
								}else{
									return `${nminute - minute}分钟前`
								}
							}else {
								return `${nhour - hour}小时${nminute - minute}分钟前`
							}
						}else if(ndate - date == 1){
							return `昨天 ${hour}:${minute}`
						}else if(ndate - date == 2){
							return `前天 ${hour}:${minute}` 
						}
					}else {
						return `${month}月${date}日 ${hour}:${minute}`
					}
				}
			}
		},
		data() {
			return {
				activeTab: 0,
				
				// 公示公告
				bullets:{
					pageNum: 1,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: -1, 	// 总页数
					total: -1, 		// 总记录数
					list:[
						
					]
				},
				// 水质报告列表
				waters:{
					pageNum: 1,  	// 当前页数
					pageSize: 10, 	// 当前页数量(
					totalPage: -1, 	// 总页数
					total: -1, 		// 总记录数
					list:[
						
					]
				}
			}
		},
		onLoad(opts) {
			if(opts.tab){
				this.activeTab=opts.tab
			}
			uni.showLoading({
				title:'加载中...'
			})
			const url = this.activeTab==0?'bulletinBoard':'waterQualityReport'
			const list = this.curList
			this.pullNewRecord(list, app.globalData.curl + url)
		},
		onReachBottom(){
			const url = this.activeTab==0?'bulletinBoard':'waterQualityReport'
			const list = this.curList
			this.pullNewRecord(list, app.globalData.curl + url)
		},
		computed:{
			curList(){
				switch(this.activeTab){
					case 0:
					return this.bullets
					case 1:
					return this.waters
					default:
					return {list:[]}
				}
			}
		},
		methods: {
			goDetail(evt, id){
				if(this.activeTab==0){
					uni.navigateTo({
						url: `../bullet_detail/bullet_detail?id=${id}`,
					});
				}else if(this.activeTab==1){
					uni.navigateTo({
						url: `../water_detail/water_detail?id=${id}`,
					});
				}
			},
			// 拉取早起的历史数据
			pullNewRecord(list, url, extra={}, desc=false){
				console.log(list)
				uni.request({
					header:{
						Authorization: 'Bearer '+app.globalData.token,
					},
					url,
					method: 'GET',
					data: {
						page: list.pageNum || 1,
						size: list.pageSize || 10,
						...extra,
					},
					success: res => {
						const {data} = res
						uni.hideLoading()
						if(data.code==200){
							console.log(data)
							const d = data.data
							list.totalPage=d.totalPage
							list.total=d.total
							if(d.total>list.list.length){
								list.pageNum++
								if(d.list.length>0){
									if(desc){
										list.list.unshift(...d.list.reverse())
									}else{
										list.list.push(...d.list)
									}
								}
							}
						}else if(data.code==500){
							uni.showToast({
								icon:'none',
								title: data.message,
							})
						}
					},
					fail: (err) => {console.error(err)},
					complete: () => {}
				});
			},
			changeTab(e){
				this.activeTab=e
				const url = e==0?'bulletinBoard':'waterQualityReport'
				const list = this.curList
				this.pullNewRecord(list, app.globalData.curl + url)
			},
		}
	}
</script>

<style>
	.content-abbr{
		overflow:hidden;
		text-overflow:ellipsis;
		-o-text-overflow:ellipsis;
		-webkit-text-overflow:ellipsis;
		-moz-text-overflow:ellipsis;
		white-space:nowrap;
	}
	page{
		padding-top:0;
	}
	.title{
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: #333333;
		line-height: 48rpx;
	}
	
	.date{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: bold;
		color: #666666;
		line-height: 36rpx;
	}
</style>
